import './Wave.less';

import React, { SFC } from 'react';

interface WaveProps {
    childCount?: number;
    childWidth?: number;
    childColor?: string;
    isPaused?: boolean;
    delay?: number;
    onClick?: () => void;
}
const prix = 'radio-ctrl-icon-status';
const Wave: SFC<WaveProps> = ({ isPaused, delay, onClick }) => {
    const blocks = new Array(10)
        .fill(0)
        .map((_, i) => <span key={i} className={`${prix}_block`} />);
    const child = new Array(3).fill(0).map((_, i) => (
        <Child key={i} delay={i * (delay || 0)}>
            {blocks}
        </Child>
    ));
    return (
        <section onClick={onClick} className={`${prix} ${prix}${isPaused ? '--paused' : ''}`}>
            {child}
        </section>
    );
};

const Child: SFC<{ delay: number }> = ({ children, delay }) => {
    return (
        <div
            className={`${prix}_child ${prix}_child--anima`}
            style={{ animationDelay: delay + 's' }}
        >
            {children}
        </div>
    );
};
export default Wave;
Wave.defaultProps = {
    isPaused: true
};
